<template>
  <div class="collapseTask">
    <el-collapse v-model="activeNames">
      <el-collapse-item ref="tasks" name="taskGroup">
        <div class="retract" @click="retractTasks" />
        <template slot="title">
          <div
            style="
              display: flex;
              align-items: flex-start;
              max-width: 100%;
              height: 100%;
              flex: 1;
            "
          >
            <div class="groupAndtaskIconPath">
              <img v-lazy="taskGroup.iconPath" />
            </div>
            <div class="taskName">{{ taskGroup.name }}</div>
          </div>
          <div class="icondown2Box">
            <img src="../../../../../assets/images/down.png" class="downIcon" />
          </div>
        </template>
        <div class="task-content">
          <template>
            <el-collapse v-model="activeNames">
              <el-collapse-item v-if="!task" :disabled="true">
                <template slot="title">暂无任务</template>
              </el-collapse-item>
              <el-collapse-item name="task">
                <template slot="title">
                  <div
                    style="
                      padding-top: 5px;
                      padding-bottom: 5px;
                      display: flex;
                      align-items: flex-start;
                      max-width: 100%;
                      height: 100%;
                      flex: 1;
                    "
                  >
                    <div class="groupAndtaskIconPath">
                      <img v-lazy="task.iconPath" />
                    </div>
                    <div
                      class="taskName"
                      style="min-width: 20px; display: contents"
                      :title="`${task.name} ${
                        task.description
                          ? '   ---   ' + task.description
                          : task.description
                      }`"
                    >
                      <div>
                        <div>{{ task.name }}</div>
                      <div
                        v-html="
                          task.description
                            ? '任务描述：' + task.description
                            : task.description
                        "
                        :class="{
                          hideTaskText: hideTaskText.indexOf(task.taskID) !== -1,
                        }"
                        @click.stop="handleClickTaskDesc($event,task.taskID)"
                      >
                      </div>
                      </div>
                    </div>
                  </div>

                  <div class="icondown2Box">
                    <!-- <i class="iconfont iconDownxiangxia28" /> -->
                    <img
                      src="../../../../../assets/images/down2.png"
                      class="downIcon"
                    />
                  </div>
                </template>
                <div>
                  <div>
                    <div class="guilineTypeShowBtn">
                      <el-popover
                        placement="right-start"
                        title="标题"
                        width="200"
                        trigger="click">
                        <div>
                          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                          <div style="margin: 15px 0;"></div>
                          <el-checkbox-group v-model="selectGuidelineType" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                        <el-button slot="reference" type="text" @click.stop.prevent>显示类型</el-button>
                      </el-popover>
                      <el-button slot="reference" type="text" v-if="isOnlyOneBrushGuideline" @click.stop.prevent="handleFixTaskState" style="margin-left: 8px;">修复任务状态</el-button>
                      <el-button slot="reference" type="text" @click.stop.prevent="handleShowOnlineTool" style="margin-left: 8px;">{{showOnlineTool ? '关闭' : '显示'}}在线工具</el-button>
                    </div>
                    <el-collapse
                      v-model="guidelineActiveNames"
                      class="guidelineCollapse"
                      @change="handleChangeGuideline"
                      v-loading="confirmLoading"
                      ref="taskCollapse"
                    >
                      <el-collapse-item
                        v-for="(gitem, gindex) in task.guidelines"
                        :key="task.taskID + '-' + gindex"
                        :name="`${gitem.guidelineID}`"
                        :class="{unShowGuideline: selectGuidelineType.indexOf(gitem.operType) == -1}"
                        @click.stop.prevent
                      >
                        <template slot="title">
                          <div
                            style="
                              display: flex;
                              align-items: flex-start;
                              max-width: 100%;
                              height: 100%;
                              flex: 1;
                            "
                            @click.stop.prevent
                          >
                            <guidelineType :type="gitem.operType" />
                            <div
                              class="guidelineDesc"
                              :class="{
                                hideGuidelineText:
                                  hideGuidelineText.indexOf(gitem.guidelineID) !== -1,
                              }"
                              v-html="gitem.description"
                              @click.stop="handleClickGuidelineDesc($event,gitem.guidelineID)"
                            />
                          </div>
                          <div
                            class="icondown2Box"
                          >
                            <img
                              src="../../../../../assets/images/down3.png"
                              class="downIcon"
                              v-if="gitem.operType !== operType['refer']"
                              @click.native="handleClickGuideline(gitem.guidelineID)"
                            />
                          </div>
                        </template>
                        <studenList
                          :gitem="gitem"
                          :selectTaskInfo="selectTaskInfo"
                          :currSelectStudentTaskData="currSelectStudentTaskData"
                          :guidelineActiveNames="guidelineActiveNames"
                          :ref="`guideline-${gitem.guidelineID}`"
                          @handleChangeReviewStu="
                            handleChangeReviewStu($event, gitem)
                          "
                          v-if="(gitem.operType == operType['upload'] || gitem.operType == operType['archive'] || gitem.operType == operType['reply'] || gitem.operType == operType['show'] || gitem.operType == operType['brush'])"
                          @click.native.stop.prevent
                          v-loading="renderingStuList"
                          :renderingStuList="renderingStuList"
                          :selectGuidelineType="selectGuidelineType"
                          :showOnlineTool="showOnlineTool"
                        />
                        <div v-else>
                          {{ gitem.operType }}类型的引导文不需要批阅
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </template>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { fixStudyState } from "@/request/teacher"
// const TaskType = () =>
//   import("@/views/courses/detail/task_N/taskType_N/taskType_N");
import guidelineType from "@/components/guidelineTypeIcon/index"
const studenList = () => import("./studenList/index");
import { operType } from "@/util/guidingtextType";
import { download } from "@/util/download"
export default {
  components: {
    // TaskType,
    studenList,
    guidelineType
  },
  data() {
    return {
      taskGroup: { name: "", iconPath: "" },
      task: { name: "", iconPath: "" },
      activeNames: ["taskGroup", "task"],
      guidelineActiveNames: [],
      clickGuideline: null,
      renderingStuList: false,
      hideGuidelineText: [],
      hideTaskText: [],
      checkAll: true,
      selectGuidelineType: [...Object.values(operType).filter(item => item !== "查阅")],
      cities: [...Object.values(operType)],
      isIndeterminate: false,
      operType,
      showOnlineTool: false
    };
  },
  props: {
    courseInfo: Object,
    selectTaskInfo: Object,
    currSelectStudentTaskData: Array,
    confirmLoading: Boolean,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    getNewTaskSetting() {
      return this.courseInfo.taskSettings;
    },
     isOnlyOneBrushGuideline() {
      let filterData = this.selectTaskInfo?.task?.data?.guidelines?.filter(item => item.operType !== operType['refer'])
      return filterData?.length == 1 && filterData?.[0]?.operType == operType['brush']
    }
  },
  watch: {
    selectTaskInfo() {
      this.setInitData();
    },
    currSelectStudentTaskData(n) {
      if (n.length) this.renderingStuList = true;
      this.$nextTick(() => {
        const timer = setTimeout(() => {
          this.renderingStuList = false;
          if(n.length && this.task.guidelines.length) {
            this.$nextTick(() => {
              let gID = this.task.guidelines.filter(item => this.selectGuidelineType.some(sitem => sitem == item.operType))?.[0]?.guidelineID || 0
              this.guidelineActiveNames = [`${gID}`]
              this.handleClickGuideline(gID)
            })
          }
          clearTimeout(timer);
        }, 250);
      });
    },
    confirmLoading(n, o) {
      if (o && !n) {
        if (this.activeNames.indexOf("task") == -1) {
          this.activeNames.push("task");
        }
      }
    },
    selectGuidelineType(n) {
      if (!this.guidelineActiveNames.length) return
      const activeIndex = this.guidelineActiveNames[0]
      const activeOperType = this.task.oldGuidelines[Number(activeIndex)]?.operType
      if (activeOperType) {
        if (n.indexOf(activeOperType) == -1) {
          this.guidelineActiveNames = []
          this.$emit("handleChangeReviewStu", null, null);
        }
      }
    },
    guidelineActiveNames(n) {
      if (!n.length) this.$emit("handleChangeReviewStu", null, null);
    }
  },
  created() {
    this.setInitData();
  },
  methods: {
    // 收起折叠组件
    retractTasks(index) {
      this.$refs.tasks.handleHeaderClick();
    },
    setInitData() {
      const { taskGroup, task } = this.selectTaskInfo;
      taskGroup && (this.taskGroup = taskGroup.data);
      task && (this.task = task.data);
      this.guidelineActiveNames = [];
      this.hideGuidelineText = [];
      // 初始化时先隐藏引导问内容，防止内容过长
      if (this.task?.guidelines) {
        this.hideGuidelineText = this.task.guidelines.map(item => {
          return item.guidelineID
        })
      }

    },
    handleChangeReviewStu(item, gitem) {
      this.$emit("handleChangeReviewStu", item, gitem);
    },
    handleChangeGuideline(val) {
      this.handleClickGuideline(val[val.length - 1])
    },
    handleClickGuideline(val) {
      let activeGuidelineLen = this.guidelineActiveNames.length;
      let value = val + "";
      if (this.guidelineActiveNames[activeGuidelineLen - 1] == value) {
        this.guidelineActiveNames = [value];
      }
    },
    handleClickGuidelineDesc(e,gid) {
      if (e.target.nodeName === "A") {
        download(e.target.href, e.target.innerText)
        e.preventDefault()
        return
      }
      if (this.hideGuidelineText.indexOf(gid) !== -1) {
        this.hideGuidelineText = this.hideGuidelineText.filter((item) => item !== gid);
      } else {
        this.hideGuidelineText.push(gid);
      }
    },
    handleClickTaskDesc(e,taskID) {
      if (e.target.nodeName === "A") return
      if (this.hideTaskText.indexOf(taskID) !== -1) {
        this.hideTaskText = this.hideTaskText.filter((item) => item !== taskID);
      } else {
        this.hideTaskText.push(taskID);
      }
    },
    handleCheckAllChange(val) {
      this.selectGuidelineType = val ? [...Object.values(operType)] : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 修复学习状态
    handleFixTaskState() {
      const params = { taskID: this.selectTaskInfo.task.data.taskID, currNo: this.courseInfo.currNo, gid: this.selectTaskInfo.task.data.guidelines[0].foreignID }
      fixStudyState(params).then(res => {
        console.log(res);
        if (res.errno === 0) {
          console.log(res.data);
          this.$antdMessage.success({content: '修复成功!'})
        } else {
          this.$antdMessage.error({content: res.message || '修复失败!'})
        }
      })
    },
    // 显示在线工具
    handleShowOnlineTool() {
      this.showOnlineTool = !this.showOnlineTool
    }
  },
};
</script>

<style lang="stylus">
.collapseTask {
  .el-collapse {
    border: none;

    .el-collapse-item.is-active {
      background: #F9F9F9;
    }

    .is-active {
      .el-collapse-item__content {
        background: #F9F9F9;
      }
    }

    .el-collapse-item.is-active .el-collapse-item__header {
      background: #F9F9F9;
    }

    .el-collapse-item {
      position: relative;
      padding: 21px 0 15px;
      background-color: #ffffff;
      box-shadow: 0px 8px 16px 0px rgba(7, 23, 39, 0.1);
      border-radius: 18px;
      transition: all 0.2s linear;

      .el-collapse-item__header, .el-collapse-item__wrap {
        border: 0;
      }

      .el-collapse-item__header {
        padding: 4px 31px 6px 12px;
        align-items: center;
        justify-content: space-between;
        height: auto;
        line-height: 1;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        transition: all 0.1s linear;

        img {
          vertical-align: bottom;
          margin-right: 8px;
          object-fit: cover;
          user-select: none;
          height: 22px;
        }

        .el-collapse-item__arrow {
          margin: 0;
        }

        .el-collapse-item__arrow .el-icon-arrow-right {
          display: none;
        }

        .el-icon-arrow-right:before {
          content: none;
        }

        .taskController {
          display: flex;
          align-items: center;
          margin: 0 45px 0 auto;

          button {
            cursor: pointer;
            outline: none;
            width: 72px;
            height: 29px;
            border-radius: 5px;
            border: none;
            font-family: Yu Gothic UI;
            font-size: 14px;
            color: #ffffff;
          }

          .saveData {
            margin-right: 20px;
            background: #f6ad35;
          }

          .startLearning {
            background: #f6ad35;
          }

          .endLearn {
            background: #02497c;
          }

          .reLearning {
            background: #5ad551;
          }
        }

        .icondown2Box {
          margin: 0 0 0 auto;
          transition: transform 0.2s linear;

          .icondown2 {
            font-size: 22px;
            color: #8a8a8a;
          }

          .downIcon {
            margin: 0;
            object-fit: cover;
            height: 100%;
          }
        }

        .tNfinishIcon {
          // width: 19px;
          height: 22px;
        }

        .groupAndtaskIconPath {
          margin-right: 8px;
          width: 30px;
          height: 22px;

          img {
            z-index: 99;
            margin: 0;
            -o-object-fit: cover;
            object-fit: cover;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            transform: translate(-5%, -10%);
          }
        }

        .taskName {
          padding-top: 5px;
          max-width: 90%;
          font-family: PMingLiU-ExtB;
          font-size: 1rem;
          color: #000000;
          line-height: 1rem;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;

          > span {
            display: block;
          }

          p {
            // display: inline;
            word-break: break-all;
            text-overflow: ellipsis;
            display: contents;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }

        .hideTaskText {
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box !important;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }

      .el-collapse-item__wrap {
        // background: #f9f9f9;
        .el-collapse-item__content {
          position: relative;
          padding-bottom: 52px;

          .retract {
            cursor: pointer;
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 4px;
            left: calc(((100% - 50px) / 2));
            background: #bfbfbf;
          }

          .task-content {
            .el-collapse-item {
              // margin-top: 20px;
              .el-collapse-item__header {
                background: #fff;
                min-height: 32px;
                position: relative;
                padding-top: 0;
                // padding-bottom: 17px;
                padding-bottom: 0;

                .taskName {
                  font-family: PMingLiU-ExtB;
                  font-size: 1rem;
                  line-height: 1.2rem;
                  color: #000000;
                }

                .guilineTypeShowBtn {
                  margin-left: auto;
                  margin-right: 10px;
                  button {
                    padding-top: 0;
                    padding-bottom: 0;
                  }
                }
              }

              .el-collapse-item__wrap {
                .el-collapse-item__content {
                  padding: 4px 21px 40px;
                  max-height: calc(100vh - 32px - 21px - 32px - 21px - 73px - 100px);
                  // overflow: hidden;
                  overflow-y: scroll;
                  background: #fff;

                  .taskDesc {
                    position: relative;

                    .mustInput, .chioceInput {
                      top: 50%;
                    }
                  }
                }

                .el-collapse-item__content::-webkit-scrollbar {
                  cursor: pointer;
                  width: 4px;
                  height: 1px;
                }

                /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
                .el-collapse-item__content::-webkit-scrollbar-thumb {
                  -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
                  background: #ccc;
                  border-radius: 10px;
                }

                /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
                .el-collapse-item__content::-webkit-scrollbar-track {
                  -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
                  border-radius: 4px;
                }
              }
            }

            .isChoose {
              .el-collapse-item__header::after {
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                width: 3px;
                height: 25px;
                background: #8a8a8a;
                transform: translate(0, 15%);
              }
            }

            .el-collapse-item:first-child {
              margin-top: 0;
            }

            .icondown2Box {
              transform: rotate(0);
            }

            .is-active {
              background: #fff;

              .el-collapse-item__wrap {
                // overflow: unset !important;
              }

              .el-collapse-item__header {
                .icondown2Box {
                  transform: rotate(180deg);
                }
              }

              .el-collapse-item__content::after {
                content: none;
              }
            }

            .isFinishAndLearing {
              .el-collapse-item__header::after {
                background: #f6ad35;
              }
            }

            .el-collapse {
              .el-collapse-item {
                .el-collapse-item__header {
                  .icondown2Box {
                    margin: 0;
                    min-width: 25px
                  }

                  .btnUnShow {
                    margin: 0 0 0 auto;
                  }
                }
              }
            }
          }
        }
      }
    }

    .is-active {
      .el-collapse-item__header {
        .icondown2Box {
          transform: rotate(180deg);
        }
      }
    }
  }

  .guidelineCollapse {
    .el-collapse-item {
      width: auto;
      padding: 0;
      background: #fff;
      box-shadow: none;
      border-radius: 0;

      > div:first-child {
        position: sticky;
        top: -5px;
        z-index: 99;
      }

      .el-collapse-item__header {
        min-height: 47px;
        padding-top: 10px !important;
        padding-bottom: 5px !important;
        padding-right: 4px !important;
        border-radius: 8px;

        .guidelineDesc {
          font-family: PMingLiU-ExtB;
          font-size: 1rem;
          color: #000000;
          word-spacing: 5px;

          p, span, div, a {
            font-family: PMingLiU-ExtB;
            font-size: 1rem;
            color: #000000;
            font-weight: 500;
          }
        }

        .hideGuidelineText {
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .icondown2Box {
          transition: all 0.2s linear;
          transform: rotate(0deg) !important;

          .downIcon {
            width: 25px;
            margin: 0;
            -o-object-fit: cover;
            object-fit: cover;
            height: 100%;
          }
        }
      }

      .el-collapse-item__header:hover {
        background: #fff6e1 !important;
      }

      .el-collapse-item__content {
        padding: 0 0 20px !important;
      }

      .guidelineTypeIcon {
        img {
          object-fit: cover;
        }
      }

      .guidelineTypeIcon-hover {
        display: none;
      }
    }

    .unShowGuideline {
      display: none;
    }

    .is-active {
      .el-collapse-item__header {
        .icondown2Box {
          transform: rotate(180deg) !important;
        }
      }
    }

    .el-collapse-item:hover {
      .guidelineTypeIcon {
        display: none;
      }

      .guidelineTypeIcon-hover {
        display: block;
      }
    }
  }
}
</style>